<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SVG SCADA - Hot Water Temperature </title>
  <script type="text/javascript" src="../../../highlight.pack.js"></script>
  <script type="text/javascript" src="../../../highlightCode.js"></script>
  <link href='../../../highlight.css' rel='stylesheet' />

  <script type="text/javascript" src="analogGaugeObject.js"></script>
 <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.2.js"></script>



<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body  style='padding:10px;font-family:arial;overflow:hidden'>
    <div id=container>
<center>
<h4>1.) SVG SCADA - Hot Water Temperature </h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>

   This shows a real-time interactive SVG SCADA drawing of a building's heating hot water system. A field temperature
   transmitter is sending its data over the DSN to the temperature gauge in the SVG SCADA drawing.

</div>
<table>
<tr>
<td>
<div style="width:400px;padding:10px;">
   <b> Scenario:</b> <br>
 The data from the field-mounted temperature transmitter is <b>published</b> over the DSN every two(2) seconds. The  SVG SCADA drawing <b>subscribes</b> to the data, and the dial of the temperature gauge moves to display the data.
 <br><br>
 Select 'Start Sending' button.<br><br>
 Values are sent over an 'HWS' channel.<br>
 (Note: The temperature values sent are randomly generated.)
</div>

</td>
<td>
<div id="svgDiv" style='width:440px;height:360px;'>

</div>
<center>
<button onClick=startSending() id=startSendingButton >Start Sending</button>
<button disabled onClick=stopSending() id=stopSendingButton>Stop Sending</button>
</center>
</td>
</tr></table>

  <br><button title="Show Javascript Source" onclick=showSource()>Javascript Source</button> <button title="Close javascript source" disabled id=closeSourceButton onClick=closeSource()>X</button>

 <div id=sourceDiv style=overflow:auto;width:100%;height:1px;visibility:hidden;overflow:hidden;>
  <br>Javascript:
  <div id=jsCodeDiv style=overflow:auto;width:90%;text-align:left; ></div>
</div>
</center>
</div>
<script id=myScript>
//---JavaScript SDK  https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.2.js ---

//--onload---
var pubnubPublish
function initPublish()
{
    pubnubPublish = new PubNub(
    {
        publishKey : 'pub-c-ea28c028-e01a-4d16-80ec-0ad017c8a0a1',
        subscribeKey : 'sub-c-0da31452-3beb-11e8-a60e-fec077c63a9e',
        ssl: true
   })

}

var pubcnt=1
var Message
//---every 2 seconds---
function publishTemperature()
{
    Message = Math.round(Math.random() * 20) + 140 //---simulated hot water temperature---

    var publishConfig =
    {
        channel : HWS,   //---unique for this viewer "HWS"+timeStamp---
        message :Message
    }

    pubnubPublish.publish(publishConfig, function(status, response)
    {
        console.log(pubcnt++);
    })
}
//---onload---
var pubnubSubscribe
function initSubscribe()
{
    pubnubSubscribe = new PubNub(
    {
        subscribeKey : 'sub-c-0da31452-3beb-11e8-a60e-fec077c63a9e',
        ssl: true
    })

    //**************the keys to kingdom*****************
    pubnubSubscribe.addListener(
    {
        message: function(m)
        {
            //---handle message---
            var channelName = m.channel; //---The channel for which the message belongs---
            var channelGroup = m.subscription; //---The channel group or wildcard subscription match (if exists)---
            var pubTT = m.timetoken; //---Publish timetoken---
            var msg = m.message; //---The Payload---
            console.log(msg)
            changeGaugeHWS(msg)
        }

    })
    //*****************************************************

    pubnubSubscribe.subscribe(
    {
        channels: [HWS] //---unique for this viewer "HWS"+timeStamp---
    })

}

//---move the SCADA gauge dial---
function changeGaugeHWS(value)
{
    var key="gaugeHWS"
    gauges[key].redraw(value);
}

//---buttons--
var PublishInterval
function startSending()
{
    changeGaugeHWS(140)

    PublishInterval=setInterval(publishTemperature,2000)
    stopSendingButton.disabled=false
    startSendingButton.disabled=true
}
function stopSending()
{
    changeGaugeHWS(80)
    clearInterval(PublishInterval)
    stopSendingButton.disabled=true
    startSendingButton.disabled=false
}

</script>
<script>

function loadFileSVG()
{
    var SVGFile="example1.svg"
    var loadXML = new XMLHttpRequest;
    loadXML.onload = callback;
    loadXML.open("GET", SVGFile, true);
    loadXML.send();
    function callback()
    {
        svgDiv.innerHTML=loadXML.responseText
        createThisGauge()
    }
}


function createThisGauge() //----this application configuration----
{
    createGauge("gaugeHWS", "HWS",80,220,5,10,"#9932CC","yellow",100,[180,200],[200,220],null,"\u00B0F");
}

document.addEventListener("onload",init(),false)
var HWS
function init()
{
    HWS="HWS"+new Date().getTime()
    initPublish()
    initSubscribe()
    loadFileSVG()
    showSourceJS()

}

function showSource()
{
  sourceDiv.style.visibility="visible"
  sourceDiv.style.height=+sourceDiv.scrollHeight+"px"

  closeSourceButton.disabled=false
  var iframe=parent.iframe1
  var frameHeight=container.scrollHeight+100

    d3.select(parent.frame1).transition().duration(1000).attr("height",frameHeight)


}

function closeSource()
{
   d3.select("#sourceDiv").transition().duration(1000).style("height","1px")
   setTimeout('sourceDiv.style.visibility="hidden"',1000)
  closeSourceButton.disabled=true

   d3.select(parent.frame1).transition().duration(1000).attr("height",650)
}
</script>

</body>

</html>